<template>
<div>
<centerHeader :title="header"></centerHeader>
  <el-tabs v-model="activeName">
    <el-tab-pane label="个人资料" name="first">
        <div class="persetup">
            <p>
              <span>账号类型</span><span>{{personallist.payment_method}}</span>
            </p>
            <p>
              <span>昵称</span><span>{{personallist.distribution}}</span>
            </p>
            <p>
              <span>用户名</span><span>{{personallist.name}}</span>
            </p>
            <p>
              <span>联系方式</span><span>{{personallist.contact}}</span> 
            </p>
            <p>
              <span>佣金比例</span><span>{{personallist.commission}}</span>
            </p>
        </div>
    </el-tab-pane>
    <el-tab-pane label="收款信息" name="second">
        <div class="persetup">
            <p>
                <span class="blue"><img src="../../../public/img/jinggao.png" alt="">
                <span st>如需修改请联系管理员</span></span>                
            </p>
            <p>
              <span>收款方式</span><span>{{personallist.payment_method}}</span>
            </p>
            <p>
              <span>持卡人姓名</span><span>{{personallist.payee}}</span>
            </p>
            <p>
              <span>卡号</span><span>{{personallist.card_number}}</span>
            </p>
            <p>
              <span>开户行</span><span>{{personallist.opening_bank}}</span>
            </p>
            
        </div>
    </el-tab-pane>
    <el-tab-pane label="修改密码" name="third">
        <form>
        <div class="persetup">
            <p >
                <label>当前密码:</label>
                <input type="password" id="oldpass">
            </p>
            <p>
                <label>新密码:</label>
                <input type="password" id="newpass">
            </p>
            <p>
                <label>新密码确认:</label>
                <input type="password" id="newpass1">
            </p>
            <p>
                <input type="button" value="提交" class="btnsub" @click="btnclick">
            </p>
        </div>
        </form>
    </el-tab-pane>
    <el-tab-pane label="客服信息" name="Fourth">
      <div class="persetup">
        <p>
          <span>工作时间:</span><span> <input type="text" :value="personallist.foottime" class="kefuxinxi" id="foottime"></span>
          <span>时间格式:&nbsp;&nbsp;09:00-18:00&nbsp;&nbsp;不填则默认为09:00-18:00</span>
        </p>
          <p>
            <span>客服微信:</span><span> <input type="text" :value="personallist.customerWX" class="kefuxinxi" id="wx"></span>
          </p>
          <p>
            <span>客服QQ:</span><span> <input type="text" :value="personallist.customerQQ" class="kefuxinxi" id="qq"></span>
          </p>
          <p class="tijiao">
            <span id="btn" @click="setCustomerNum">保存</span>
            <span id="btn" @click="resetclick">重置</span>
          </p>
      </div>
  </el-tab-pane>
  </el-tabs>
  </div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  data() {
    return {
      activeName: "first",
      user_id: "",
      personallist: "",
      old: "",
      newpass: "",
      newpass1: "",
      header: [{ title: "个人信息", path: "/home/setup/personal" }],
      kefuwx: "",
      kefuqq: "",
      foottime:''
    };
  },
  components: {
    centerHeader
  },
  methods: {
    btnclick() {
      let that = this;
      that.old = document.getElementById("oldpass").value;
      that.newpass = document.getElementById("newpass").value;
      that.newpass1 = document.getElementById("newpass1").value;
      if (
        that.old == "" ||
        that.old == null ||
        that.newpass == "" ||
        that.newpass == null ||
        that.newpass1 == "" ||
        that.newpass1 == null
      ) {
        that.$message.error("密码不能为空!");
      } else {
        if (that.newpass != that.newpass1) {
          that.$message.error("两次输入的密码不相符!");
        } else {
          that.editUserPassword(that.old, that.newpass).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.message + ",请重新登录!");
              localStorage.removeItem("userInfo");
              this.$router.push({ path: "/" });
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    },
    editUserPassword(old_psw, new_psw) {
      return this.axios.post("/cp/v1/User/editUserPassword", {
        user_id: this.user_id,
        old_psw: old_psw,
        new_psw: new_psw
      });
    },
    //修改客服信息（客服qq客服微信）
    setCustomerNum() {
      let that = this;
      that.kefuwx = document.getElementById("wx").value;
      that.kefuqq = document.getElementById("qq").value;
      that.foottime = document.getElementById("foottime").value;
      if (!that.foottime) {
        that.foottime='09:00-18:00'
      }
      that.axios
        .post("/cp/v1/User/setCustomerNum", {
          user_id: that.user_id,
          customerQQ: that.kefuqq,
          customerWX: that.kefuwx,
          foottime:that.foottime
        })
        .then(res => {
          if (res.data.code == 200) {
            that.axios
              .post("/cp/v1/User/getUserInfo", {
                user_id: that.user_id
              })
              .then(res => {
                if (res.data.code == 200) {
                  that.personallist = res.data.data;
                  that.$message.success("修改成功");
                }
              });
          }
        });
    },
    //重置
    resetclick() {
      document.getElementById("wx").value = this.personallist.customerWX;
      document.getElementById("qq").value = this.personallist.customerQQ;
      document.getElementById("foottime").value = this.personallist.foottime;
    }
  },
  created() {
    let that = this;
    that.user_id = JSON.parse(localStorage.userInfo).user_id;
    that.activeName = "first";
    if (that.$route.query.three) {
      that.activeName = "third";
    }
    that.axios
      .post("/cp/v1/User/getUserInfo", {
        user_id: that.user_id
      })
      .then(res => {
        if (res.data.code == 200) {
          console.log(res);
          that.personallist = res.data.data;
        }
      });
  }
};
</script>
<style scoped>
.persetup {
  text-align: left;
  padding: 20px 0px 20px 28px;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: rgba(0, 0, 0, 1);
}
.persetup p {
  margin-top: 30px;
}

.persetup p:last-child {
  margin-bottom: 20px;
}
.persetup > p > label {
  width: 124px;
  display: inline-block;
  text-align: right;
}
.persetup:first-child > p > span:first-child {
  text-align: right;
  margin-right: 30px;
  display: inline-block;
}
.btnsub {
  background: rgba(54, 164, 255, 1);
  border-radius: 20px;
  border: none;
  color: #ffffff;
  padding: 10px 100px 10px 100px;
  margin-left:96px;
  margin-top: 50px;
}
.blue {
  display: inline-block;
  background: #36a4ff;
  color: #ffffff;
  padding: 8px;
  padding-left: 50px;
  padding-right: 50px;
  letter-spacing: 1.5px;
  width: auto !important;
}
.kefuxinxi {
  color: #aaaaaa;
  padding-left: 1%;
  padding-top: 2px;
  padding-bottom: 2px;
}
.kefuxinxi:focus {
  color: #000000;
}
.tijiao > #btn {
  padding: 10px 30px;
  color: #ffffff;
  background: #36a4ff;
  width: auto;
  border-radius: 10px;
  cursor: pointer;
}
.el-tabs{
  padding-left: 3%
}
</style>
